<template>
  <view class="home flex column bg">
    <u-navbar :is-back="false" :background="null" :title-bold="true" title="实时报警" back-icon-color="#fff"
      title-color="#fff">
      <view slot="right" class="navbar-right">
        <image v-if="swiperCurrent === 1" src="/static/image/screen.svg" @click="clickBtn" class="navbar-right--icon" />
      </view>
    </u-navbar>
    <view>
      <u-tabs-swiper bg-color="transparent" ref="uTabs" inactive-color="#999999" :list="list" :current="current"
        @change="tabsChange" :is-scroll="false"></u-tabs-swiper>
    </view>
    <swiper class="item one" :current="swiperCurrent" @transition="transition" style="height: 100%"
      @animationfinish="animationfinish">
      <swiper-item class="swiper-item">
        <unConfirm v-if="swiperCurrent === 0" :currentIndex="currentIndex" style="width: 100%; height: 100%"
          @sumChange="(sum) => sumChange(sum, 'unConfirm')"></unConfirm>
      </swiper-item>
      <swiper-item class="swiper-item">
        <confirm v-if="swiperCurrent === 1" :currentIndex="currentIndex" @sumChange="(sum) => sumChange(sum, 'confirm')"
          style="width: 100%; height: 100%" :form="form" :nameList="nameList"></confirm>
      </swiper-item>
    </swiper>

    <u-tabbar bg-color="#0d1a51" inactive-color="#666" active-color="#fff" height="60px" icon-size="30"
      mid-button-size="40" :list="barList" :mid-button="midButton"></u-tabbar>

    <!-- 更新提示 -->
    <app-update ref="app_update" :force="false" :tabbar="false"></app-update>
  </view>
</template>

<script>
import unConfirm from './unConfirm.vue'
import confirm from './confirm.vue'
// import plusListener from '@/utils/unipushListener.js'

export default {
  name: "index",
  components: { unConfirm, confirm },
  data() {
    return {
      emitEvent: "alarmConfirm",
      coalMineName: "",
      data: "",
      form: {
        show: false,
        disposalLevel: "",
        customerCode: "", //企业编码
        customerName: "", //企业名称
        sensorTypeName: "", // 传感器类型名称
        sensorType: "", // 传感器类型
        alarmType: "", // 报警类型
        alarmTypeName: "", //报警类型名称
        beginDate: "", //开始时间
        endDate: "", // 结束时间
      },
      list: [
        {
          name: "未确认（0）",
        },
        {
          name: "已确认（0）",
        },
      ],
      barList: [],
      nameList: [],
      currentIndex: 0,
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
    };
  },
  methods: {
    // tabs通知swiper切换
    tabsChange(index) {
      this.swiperCurrent = index;
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      const dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      const current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    clickBtn() {
      const url = "/pages/alarm/screen";
      const form = {
        ...this.form,
        show: false, // 预警
        showAlarmType: true,
      };
      uni.navigateTo({
        url: `${url}?form=${JSON.stringify(form)}&emitEvent=${this.emitEvent}`,
      });
    },
    /**
     * 请求煤矿名称列表
     */
    async getOptions() {
      const res = await this.$get("/realTime/alarm/getBaseInfoDic");
      if (res && Array.isArray(res.body)) {
        this.nameList = res.body;

        getApp().globalData.coalList = res.body;
      }
    },
    /**
     * 数量统计
     */
    sumChange(sum, type) {
      if (type === "unConfirm") {
        // 未确认
        this.list[0].name = `未确认（${sum}）`;
      } else {
        this.list[1].name = `已确认（${sum}）`;
      }
    },
    /**
     * 初始请求一次已确认数据
     */
    getConfirmData() {
      const searchData = {
        alarmTypes: "",
        customerCode: "",
        startTime: "",
        endTime: "",
        sensorTypes: "",
      };
      this.$post("/realTime/alarm/getConfirmedAlarm", searchData).then((res) => {
        if (res?.body?.confirmed) {
          this.sumChange(res.body.confirmed.length, "confirm");
        }
      });
    },
    /**
     * 获取用户信息,更新cid
     */
    async getUserInfo() {
      const res = await this.$post("/mobile/userInfo/getUserInfo");
      if (res?.body?.personnelId) {
        const personnelId = res.body.personnelId;

        this.saveUserInfo(res.body);

        // plusListener.getClientInfoLoop({success: (clientId) => {
        //   // 保存更新cid
        //   this.$post('/personnel/clientId/saveOrUpdate', {
        //     clientId,
        //     personnelId
        //   }).then(res => {
        //   })
        // }})
      }
    },
    /**
     * 存储账号信息
     */
    saveUserInfo(body) {
      getApp().globalData.userInfo = {
        customerAuth: body.dataType === "2", // true集团账号/ false企业账号
        customerCode: body.enCode,
        customerName: body.customerShortName,
        customerId: body.customerId,
        superviseIndustry: body.superviseIndustry, // 监管行业
      };

      if (body.dataType === "3") {
        // 企业账号
        if (getApp().globalData.list[3].text === "监测监控") {
          getApp().globalData.list[3].pagePath = "/pages/monitoring/customerIndex";
        }
        // if (getApp().globalData.list[2].text === "企业信息") {
        //   getApp().globalData.list[2].pagePath = "/pages/firmInfo/customerIndex";
        // }
      } else {
        // 集团账号
        if (getApp().globalData.list[3].text === "监测监控") {
          getApp().globalData.list[3].pagePath = "/pages/monitoring/index";
        }
        // if (getApp().globalData.list[2].text === "企业信息") {
        //   getApp().globalData.list[2].pagePath = "/pages/firmInfo/index";
        // }
      }

      // 矿安助手没有企业信息模块，故去掉
      // if (getApp().globalData.list[3].text === '企业信息') {
      //   getApp().globalData.list.splice(3, 1)
      // }
    },
  },
  computed: {
    midButton() {
      return getApp().globalData.tabbarMidButton;
    },
  },
  onLoad() {
    this.barList = getApp().globalData.list;
    this.getOptions();
    // 获取已确认信息
    this.getConfirmData();

    // 获取用户信息
    this.getUserInfo();

    uni.$on(this.emitEvent, (res) => {
      this.form = {
        ...res,
      };
    });
  },
  onShow() {
    this.currentIndex++;
  },
  onUnload() {
    // 清除监听
    uni.$off(this.emitEvent);
  },
};
</script>

<style lang="scss" scoped>
.home.bg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #0d1a51;
  background: url('/static/image/bg.png');
  background-repeat: no-repeat;
  background-size: contain;
  .navbar-right {
    margin-right: 40rpx;
    &--icon {
      width: 40rpx;
      height: 40rpx;
    }
  }
  .swiper-div {
    display: flex;
    width: 100%;
    margin-bottom: 10rpx;
  }
  .form-title {
    background: #e5e5e5;
    line-height: 70rpx;
    text-indent: 10rpx;
    color: #666666;
  }
}
</style>
